<template>
  <div class="planDetial">
    <div class="table-box">
      <div class="detail-container">
        <div class="detail-title">基本信息</div>
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" ref="form">
          <a-row>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="母料编码">
                <a-input v-model="detail.masterbatchCode" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="母料名称">
                <a-input v-model="detail.masterbatchName" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8" v-if="detail.masterbatchModel">
              <a-form-model-item label="规格型号">
                <a-input v-model="detail.masterbatchModel" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="计量单位">
                <a-input v-model="detail.masterbatchCompany" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="版本号">
                <a-input v-model="detail.version" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8">
              <a-form-model-item label="版本说明"  >
                <a-textarea v-model="detail.versionMemo" :auto-size="{ minRows: 2, maxRows: 10 }" disabled/>
              </a-form-model-item>
            </a-col>
            <a-col :xl="12" :xxl="8" v-if="detail.remake">
              <a-form-model-item label="备注" >
                <a-textarea v-model="detail.remake" :auto-size="{ minRows: 2, maxRows: 10 }" disabled/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="detail-container">
        <div class="detail-title">产品信息</div>
        <a-table
          :columns="columnsBom"
          :data-source="bomList"
          :pagination="false"
          :loading="loading"
          :scroll="{x: 1660,y: this.$getViewportSize().height-420 }"
          rowKey="bomId">
          <template
            v-for="col in columnsBom"
            :slot="col.key"
            slot-scope="text,record"
          >
            <span>
              <TableTootip :content="text"></TableTootip>
            </span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import {req} from "../../../api/axiosFun";
import preventBack from 'vue-prevent-browser-back';
import TableTootip from '../../../components/TableTootip.vue'
export default {
  name: "Dict",
  mixins: [preventBack],//注入
  props:['bomId'],
  components:{
    TableTootip
  },
  data() {
    return {
      title: '',
      itemTitle: '',
      disabled: false,
      detail: {
        masterbatchCode: '1',
        masterbatchName: '1',
        masterbatchCompany: '1',
        version: '1',
        remake: '1',
        versionMemo: '1',
        masterbatchModel: '1',
      },
      bomList:[],
      columnsBom,
      loading: false,
      labelCol: {span: 6},
      wrapperCol: {span: 18},
    }
  },
  watch: {
    bomId(val){
      this.bomList = []
      this.getDetail(val);
    }
  },
  mounted() {
    this.getDetail(this.bomId);
  },
  methods: {
    getDetail(bomId){
      req("post", 'Bom/getBomById', {
        bomId: bomId
      }).then(res => {
        if (res.result === 'success') {
          let detail = res.data;
          this.detail=detail;
          this.bomList = detail.bomDetail;
        }
      });
    }
  }
}

const columnsBom = [
  {
    title: '序号',
    align: 'center',
    width: '40px',
    fixed: 'left',
    customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: '子件编码',
    align: 'center',
    dataIndex: 'componentCode',
    key: 'componentCode',
    scopedSlots: {customRender: 'componentCode'},
    width: 80,
    fixed: 'left',
  },
  {
    title: '子件名称',
    align: 'left',
    dataIndex: 'componentName',
    key: 'componentName',
    scopedSlots: {customRender: 'componentName'},
    width: 250,
  },
  {
    title: '子件规格',
    align: 'center',
    dataIndex: 'componentModel',
    key: 'componentModel',
    scopedSlots: {customRender: 'componentModel'},
    width: 110
  },
  {
    title: '计量单位',
    align: 'center',
    dataIndex: 'componentCompany',
    key: 'componentCompany',
    width: 70,
    scopedSlots: {customRender: 'componentCompany'},
  },
  {
    title: '基本用量',
    align: 'center',
    dataIndex: 'basicDosage',
    key: 'basicDosage',
    width: 80,
    scopedSlots: {customRender: 'basicDosage'},
  },
  {
    title: '基础数量',
    align: 'center',
    dataIndex: 'basicQuantity',
    key: 'basicQuantity',
    width: 80,
    scopedSlots: {customRender: 'basicQuantity'},
  },
  {
    title: '子件损耗率',
    align: 'center',
    dataIndex: 'componentLoss',
    key: 'componentLoss',
    scopedSlots: {customRender: 'componentLoss'},
    width: 80
  },
  {
    title: '辅助单位编码',
    align: 'center',
    dataIndex: 'auxiliaryCompanyCo',
    key: 'auxiliaryCompanyCo',
    scopedSlots: {customRender: 'auxiliaryCompanyCo'},
    width: 90,
  },
  {
    title: '辅助单位',
    align: 'center',
    dataIndex: 'auxiliaryCompany',
    key: 'auxiliaryCompany',
    scopedSlots: {customRender: 'auxiliaryCompany'},
    width: 80
  },
  {
    title: '换算率',
    align: 'center',
    dataIndex: 'conversion',
    key: 'conversion',
    scopedSlots: {customRender: 'conversion'},
    width: 70
  },
  {
    title: '辅助基本用量',
    align: 'center',
    dataIndex: 'auxiliaryBasicDosage',
    key: 'auxiliaryBasicDosage',
    scopedSlots: {customRender: 'auxiliaryBasicDosage'},
    width: 90,
  },
  {
    title: '供应类型',
    align: 'center',
    dataIndex: 'supplyType',
    key: 'supplyType',
    width: 90,
    scopedSlots: {customRender: 'supplyType'},
  },
  {
    title: '成本相关',
    align: 'center',
    dataIndex: 'costRelated',
    key: 'costRelated',
    width: 100,
    scopedSlots: {customRender: 'costRelated'},
  },
  {
    title: '仓库编码',
    align: 'center',
    dataIndex: 'warehouseCode',
    key: 'warehouseCode',
    scopedSlots: {customRender: 'warehouseCode'},
    width: 80
  },
  {
    title: '仓库名称',
    align: 'center',
    dataIndex: 'warehouseName',
    key: 'warehouseName',
    scopedSlots: {customRender: 'warehouseName'},
    width: 130,
  },
  // {
  //   title: '领料部门',
  //   align: 'center',
  //   dataIndex: 'dep',
  //   key: 'dep',
  //   scopedSlots: {customRender: 'dep'},
  // },
  {
    title: '备注',
    align: 'left',
    dataIndex: 'componentRemake',
    key: 'componentRemake',
    width: 140,
    scopedSlots: {customRender: 'componentRemake'},
  }
];

</script>

<style scoped>
@import "../../../assets/css/maincss.css";
/deep/ .ant-table-tbody >tr.ant-table-expanded-row-level-1>td {
  padding: 0 0 2px 0;
}
.planDetial {
  background: none;
  padding: 0 0;
}
.detail-container span {
  width: 100%;/*新加*/
}
</style>
